<template>
<div class="layerRtb layerRtb-threecolumn">
     <three-title :title="{name:'性格'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">性格</p>
                 <div class="analyItemCon">
                    <p class="col-md-4 mb20">
                        <el-radio-group  v-model="radio1">
                        <el-radio-button @click.native.prevent="clickitem1(29)" label="29">开朗</el-radio-button>
                        <el-radio-button @click.native.prevent="clickitem1(30)" label="30">谨慎</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio2">
                        <el-radio-button @click.native.prevent="clickitem2(31)" label="31">感性</el-radio-button>
                        <el-radio-button @click.native.prevent="clickitem2(32)" label="32">理性</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio3">
                        <el-radio-button @click.native.prevent="clickitem3(33)" label="33">敏感</el-radio-button>
                        <el-radio-button @click.native.prevent="clickitem3(34)" label="34">随和</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio4">
                        <el-radio-button @click.native.prevent="clickitem4(35)" label="35">细致</el-radio-button>
                        <el-radio-button @click.native.prevent="clickitem4(36)" label="36">粗糙</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-4 mb20">
                        <el-radio-group v-model="radio5">
                        <el-radio-button @click.native.prevent="clickitem5(37)" label="37">活泼</el-radio-button>
                        <el-radio-button @click.native.prevent="clickitem5(38)" label="38">稳重</el-radio-button>
                        </el-radio-group>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8 col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input ref="hello"  v-model="input" placeholder="输入备注"></el-input>
                        </span>
                        <span class="col-md-22 ">
                         <el-button class="fr"  @click="confirm(1,input)" type="primary">确定</el-button>
                        </span>
                    </p>
                      <span style="top:20%" :class="['circlemark', XGsecList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{XGsecList.isPresence==null?'待':'完'}}</span>

                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-10">
                    <span class="col-md-1 cLightGray ">备注</span>
                    <span  class="col-md-8 lh20">
                        <el-input v-model="inputHandel"  placeholder="请输入处理备注..."></el-input>
                    </span>
                </p>
                     <span style="top:20%" :class="['circlemark', XGList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{XGList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div class="tx-center">
            <el-button @click="confirm(2,inputHandel)" type="primary">保存</el-button>
        </div>
    </div>

</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { saveTrickData } from '../../Resources/Api'

export default {

    data () {
        return {
            XGList: {},
            XGsecList: {},
            inputHandel: '',
            radio1: '', // 开朗谨慎
            radio2: '', // 感性理性
            radio3: '', // 敏感随和
            radio4: '', // 细致粗糙
            radio5: '', // 活泼稳重
            input: ''
        }
    },

    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.XGList = this.$route.query.XGList
        this.break()
    },
    methods: {
        clickitem1 (e) {
            if (e === this.radio1) {
                this.radio1 = ''
                this.saveTrickData(e, null, 0)
            } else {
                this.radio1 = e
            }
        },
        clickitem2 (e) {
            if (e === this.radio2) {
                this.radio2 = ''
                this.saveTrickData(e, null, 0)
            } else {
                this.radio2 = e
            }
        },
        clickitem3 (e) {
            if (e === this.radio3) {
                this.radio3 = ''
                this.saveTrickData(e, null, 0)
            } else {
                this.radio3 = e
            }
        },
        clickitem4 (e) {
            if (e === this.radio4) {
                this.radio4 = ''
                this.saveTrickData(e, null, 0)
            } else {
                this.radio4 = e
            }
        },
        clickitem5 (e) {
            if (e === this.radio5) {
                this.radio5 = ''
                this.saveTrickData(e, null, 0)
            } else {
                this.radio5 = e
            }
        },
        break () {
            // 综合备注
            if (this.XGList.isPresence !== null) {
                this.inputHandel = this.XGList.isPresence[0].remake
            }
            this.XGList.stageMediumType.forEach(element => {
                if (Number(element.exclusiveId) === 10) {
                    this.$nextTick(() => {
                        this.XGsecList = element
                    })
                    // 性格选项
                    element.stageSmallType.forEach(item => {
                        if (item.isPresence !== null) {
                            let id = Number(item.exclusiveId)
                            this.card(id)
                        } else {
                            this.input = ''
                        }
                    })
                    // 性格备注
                    if (element.isPresence !== null) {
                        this.input = element.isPresence[0].remake
                    }
                }
            })
        },
        card (id) {
            if (id === 29 || id === 30) {
                this.radio1 = id
            } else if (id === 31 || id === 32) {
                this.radio2 = id
            } else if (id === 33 || id === 34) {
                this.radio3 = id
            } else if (id === 35 || id === 36) {
                this.radio4 = id
            } else if (id === 37 || id === 38) {
                this.radio5 = id
            }
        },
        confirm (flg, input) {
            if (flg === 1) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                let arr = [this.radio1, this.radio2, this.radio3, this.radio4, this.radio5]
                let arrList = arr.filter(function (s) { return s !== '' })
                if (Number(arrList.length) === 0) {
                    layer.msg('尚未选择')
                    return
                }
                arrList.forEach(item => {
                    this.saveTrickData(item, null)
                })
                this.saveTrickData(10, input)
            }
            if (flg === 2) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (this.XGsecList.isPresence !== null) {
                    this.saveTrickData(3, input)
                } else {
                    layer.msg('尚未完善信息')
                }
            }
        },
        saveTrickData (val, input, deflg) {
            saveTrickData({
                user_card_no: this.leftInfo.cardNo, // 卡号
                userName: this.leftInfo.userName, // 姓名
                remake: input, // 备注
                operatorCard: this.userInfo.as_cardNo, // 操作人
                operatorName: this.userInfo.as_userName, // 操作人姓名
                exclusiveId: val, // 专属ID
                delFlag: deflg
            }).then(res => {
                if (deflg === 0) {
                    return
                }
                if (res.data.StatusCode === 0) {
                    layer.msg('保存成功')
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
        }
    }
}
</script>
